<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript能力测验</title>
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/jquery.min.js"></script>

</head>

<body>

<!--页面跳转-->
<h4>页面跳转</h4>
<a id="baidu" href="javascript:void(0);" >百度</a>

<hr/>


<!-- 时钟 -->
<h4>时钟</h4>
当前时间：
<span id="clock">2020-12-02 20:28:50</span>

<hr/>



<!-- 二级联动 -->
<h4>二级联动</h4>
父类：
<select id="parent">
    <option value="0">请选择分类</option>
    <option value="1">新闻</option>
    <option value="2">体育</option>
    <option value="3">时尚</option>
</select>
子类：
<select id="subclass"></select>

<hr/>




<!--登录表单-->
<h4>登录表单</h4>
<form>
    用户名：<input type="text"/><br/>
    密码：<input type="password"/><br/>
    验证码：<input type="text"/><br/>
    <input type="submit" value="登录"/>
</form>

<hr/>




<!--商品数据追加到表格-->
<h4>商品数据追加到表格</h4>
<table id="goods-list">
    <tr>
        <th>id</th>
        <th>商品名</th>
        <th>价格</th>
    </tr>
</table>

<hr/>




<!--分页效果显示-->
<h4>分页效果显示</h4>
<ul style="height: 45px">
    <li class="prev">&lt;</li>
    <li class="num">1</li>
    <li class="num active">2</li>
    <li class="num">3</li>
    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="num">7</li>
    <li class="next">&gt;</li>
</ul>

<hr/>




<!--内容列表-->
<h4>内容列表</h4>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>标题</th>
        <th>审核</th>
        <th>时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1001</td>
        <td>“向钱葱”“姜你军”卷土重来！价格要直追猪肉？</td>
        <td>未审核</td>
        <td>2020-12-01</td>
        <td>
            <button>删除</button>
            <button>审核</button>
        </td>
    </tr>
    <tr>
        <td>10005</td>
        <td>对标鸿蒙 OS，Google 下一代操作系统 Fuchsia 源码公开！</td>
        <td>已审核</td>
        <td>2020-12-02</td>
        <td>
            <button>删除</button>
            <button>取消审核</button>
        </td>
    </tr>
    <tr>
        <td>10006</td>
        <td>被弃用的 Docker 会被 Podman 取代吗？</td>
        <td>未审核</td>
        <td>2020-12-01</td>
        <td>
            <button>删除</button>
            <button>审核</button>
        </td>
    </tr>
    </tbody>
</table>

<hr/>




<!--全选和反选-->
<h4>全选和反选</h4>
兴趣爱好：
<input type="checkbox" /> 唱歌
<input type="checkbox" /> 画画
<input type="checkbox" /> 游泳
<input type="checkbox" /> 钓鱼
<br />
<button id="all">全选</button>
<button id="choose">反选</button>

<hr/>

<script src="js/main.js"></script>
</body>

</html>